<script lang="ts">
  import { Amplify } from 'aws-amplify';
  import { I18n } from 'aws-amplify/utils';
  import { Authenticator, translations } from '@aws-amplify/ui-svelte';
  import '@aws-amplify/ui-svelte/styles.css';
  import aws_exports from './aws-exports';

  Amplify.configure(aws_exports);

  I18n.putVocabularies(translations);
  I18n.setLanguage('en');
  I18n.putVocabulariesForLanguage('en', {
    'Password does not conform to policy: Password not long enough':
      'Your password is too short! Try a longer password!',
  });

  const formFields = {
    signIn: {
      username: {
        dialCode: '+82',
      },
    },
    signUp: {
      phone_number: {
        dialCode: '+227',
        dialCodeList: ['+1', '+82', '+227', '+100'],
      },
    },
  };
</script>

<Authenticator {formFields}>
  {#snippet children({ user, signOut })}
    <h1>Hello {user.username}!</h1>
    <button onclick={signOut}>Sign Out</button>
  {/snippet}
</Authenticator>
